<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <style>
        /* 让表格显示单双行效果 */

        tbody tr:nth-child(even):hover {
            background-color: #ffffcc;
        }

        tbody tr:nth-child(odd):hover {
            background-color: #ddd;
        }

        /* 让整个页面居中显示 */
        body {
            display: block;
            margin: 0 auto;
            height: 100vh;
        }


        /* 调整表格样式 */
        table {
            border-collapse: collapse;
            width: 80%;
            max-width: 800px;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

    </style>
</head>
<body>
<h1>学生信息管理系统</h1>
<form action="/student/byConditions" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <label for="class">班级：</label>
    <input type="number" id="class" name="classBatch">
    <label for="gender">性别：</label>
    <select id="gender" name="gender">
        <option value="">请选择</option>
        <option value="1">男</option>
        <option value="0">女</option>
    </select>
    <button type="submit">查询</button>
</form>
<table>
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>班级</th>
        <th>英文名字</th>
        <th>家庭住址</th>
        <th>手机号码</th>
        <th>生日</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="student : ${students}">
        <td th:text="${student.sid}">ID</td>
        <td th:text="${student.name}">中文名</td>
        <td th:text="${student.gender}">性别</td>
        <td th:text="${student.classBatch}">班级</td>
        <td th:text="${student.englishName}">英文名</td>
        <td th:text="${student.address}">地址</td>
        <td th:text="${student.phoneNumber}">电话号码</td>
        <td th:text="${student.birthday}">生日</td>
    </tr>
    </tbody>
</table>
</body>
</html>
